// 1.CommonJS方式导入模块
const { add, mul } = require('./js/mathUtils.js');
console.log(add(20, 20));
console.log(mul(20, 20));

// 2.ES6方式模块化
import { name, age } from "./js/info.js";
console.log(name);

// 3.导入css，用webpack打包
require('./css/normal.css');

// 3.依赖less文件
require('./css/special.less');
document.writeln('<h2>hello webpack!</h2>')


// 若要将ES6语法转换成ES5语法以兼容不支持ES6语法的浏览器，需要安装babel，例如：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

// 4.使用vue，（npm install vue@2.5.21）
import Vue from 'vue';  // 之所以能够这样导入vue模块，是因为export default的支持
//import App from './vue/app' // 将app.js导入
import App from './vue/app.vue'; // 使用vue组件前，需要安装配置vue的loader，例如：npm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21

// 抽离成一个组件 --> 将其放到vue/app.js中
// const App = {
//     template: `
//     <div>
//       <h2>{{message}}</h2>
//       <button @click="btnClick">按钮</button>
//       <h2>{{name}}</h2>
//     </div>
//     `,
//     data() {
//         return {
//             message: "Hello Webpack!",
//             name: "cgs"
//         }
//     },
//     methods: {
//         btnClick() {

//         }
//     }
// }

new Vue({
    el: "#app",
    template: `<App />`,  // 既有el又有template，会把template内容将挂载的el替换掉
    components:{
        App
    }
});